<p-growl [(value)]="msgs"></p-growl>
<div class="login-body signup-body">
    <div class="login-panel ui-fluid">
        <div class="card">

            <div class="login-panel-header">
                <img class="user-avatar" src="assets/img/defaultLogo.png" width="100px" />
            </div>

            <div *ngIf="this.step === '1'">
                <h3 class="header-center text-grey">
                    <a class="btn btn-light" [routerLink]="['/']" role="button">
                        <i class="fa fa-home" aria-hidden="true"></i>
                    </a>
                    {{'iPAN Member Registeration'|translate}}
                    <span class="badge badge-secondary">{{'Step 1'|translate}}</span>
                </h3>

                <form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)" role="form">


                    <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px">
                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <p-checkbox
                                    binary="true"
                                    label="Corporate User"
                                    [(ngModel)]="isCorporate"
                                    formControlName="userType">
                                </p-checkbox>
                            </span>
                        </div>

                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="firstName">
                                <label>* {{'First Name'|translate}}</label>
                            </span>
                        </div>
                        <div class="ui-g-12">
                            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['firstName'].valid&&userform.controls['firstName'].dirty">
                                {{'firstName is required'|translate}}
                            </div>
                        </div>


                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="lastName">
                                <label>* {{'Surname'|translate}}</label>
                            </span>
                        </div>
                        <div class="ui-g-12">
                            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['lastName'].valid&&userform.controls['lastName'].dirty">
                                {{'Surname is required'|translate}}
                            </div>
                        </div>

                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="privateEmail" email>
                                <label>* {{'Email'|translate}}</label>
                            </span>
                        </div>
                        <div class="ui-g-12 pd-20">
                            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['privateEmail'].valid&&userform.controls['privateEmail'].dirty">
                                {{'Invalid Email Address'|translate}}
                            </div>
                        </div>


                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="referID">
                                <label>* {{isCorporate?'Corporate Principal ID':'Referral ID'|translate}}</label>
                            </span>
                        </div>
                        <div class="ui-g-12">
                            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['referID'].valid&&userform.controls['referID'].dirty">
                                {{isCorporate?'Corporate Principal ID Invalid':'Referral ID Invalid'|translate}} {{'i800XXXX'}}
                            </div>
                        </div>

                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="referSurname">
                                <label>* {{isCorporate?'Principal Surname':'Referral Surname'|translate}}</label>
                            </span>
                        </div>
                        <div class="ui-g-12">
                            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['referSurname'].valid&&userform.controls['referSurname'].dirty">
                                {{isCorporate?'Name Required':'Referral Surname Required'|translate}}
                            </div>
                        </div>


                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="mobile">
                                <label> {{'Mobile'|translate}}</label>
                            </span>
                        </div>
                        <div class="ui-g-12"></div>

                        <div class="ui-g-12 pd-20">
                            <div class="ui-g-12 text-grey text-left">{{'Location'|translate}}</div>
                            <div class="ui-g-12 " style="text-align: left;">
                                <p-autoComplete name="country"
                                                [suggestions]="cdropDownSuggestions.countryList"
                                                (completeMethod)="filterCountries($event)"
                                                [size]="30"
                                                formControlName="country"
                                                [minLength]="1"
                                                placeholder="*{{'Country'|translate}}"
                                                [dropdown]="true">
                                </p-autoComplete>
                                <p-autoComplete name="State"
                                                [suggestions]="cdropDownSuggestions.stateList"
                                                (completeMethod)="filterStates($event)"
                                                [size]="30"
                                                formControlName="state"
                                                [minLength]="1"
                                                placeholder="*{{'State'|translate}}"
                                                [dropdown]="true">
                                </p-autoComplete>
                                <p-autoComplete name="city"
                                                [suggestions]="cdropDownSuggestions.cityList"
                                                (completeMethod)="filterCities($event)"
                                                [size]="30"
                                                formControlName="city"
                                                [minLength]="1"
                                                placeholder="*{{'City'|translate}}"
                                                [dropdown]="true">
                                </p-autoComplete>
                                <!--<p-dropdown name="country" placeholder="*{{'Country'|translate}}" [options]="cdropDownOptions.countryList" formControlName="country"-->
                                    <!--[autoWidth]="false" filter="true" (onChange)="onRreshDropDownOptions($event)"></p-dropdown>-->
                                <!--<p-dropdown name="state" placeholder="*{{'State'|translate}}" [options]="cdropDownOptions.stateList" formControlName="state"-->
                                    <!--[autoWidth]="false" filter="true" (onChange)="onRreshDropDownOptions($event)"></p-dropdown>-->
                                <!--<p-dropdown name="city" placeholder="*{{'City'|translate}}" formControlName="city" editable="true" [options]="cdropDownOptions.cityList" [autoWidth]="false"-->
                                    <!--filter="true" (onChange)="onRreshDropDownOptions($event)"></p-dropdown>-->
                            </div>
                        </div>

                        <!-- <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="suburb">
                                <label>*{{'Suburb'|translate}}</label>
                            </span>
                        </div> -->

                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="street">
                                <label>*{{'Street'|translate}}</label>
                            </span>
                        </div>


                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="occupation">
                                <label> *{{'Occupation'|translate}}</label>
                            </span>
                        </div>
                        <div class="ui-g-12">
                            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['occupation'].valid&&userform.controls['occupation'].dirty">
                                {{'Occupation Required'|translate}}
                            </div>
                        </div>

                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="position">
                                <label> {{'Position'|translate}}</label>
                            </span>
                        </div>


                        <div class="ui-g-12 pd-20">
                            <span class="md-inputfield ui-float-label">
                                <input type="text" pInputText formControlName="company">
                                <label> {{'Company'|translate}}</label>
                            </span>
                        </div>



                        <div class="ui-g-12 pd-20">
                            <div class="ui-g-6 text-grey text-left">{{'Experience in Real Estate'|translate}}</div>
                            <div class="ui-g-6">
                                <p-dropdown [options]="experienceList" formControlName="experience" [autoWidth]="false"></p-dropdown>
                            </div>
                        </div>

                        <div class="ui-g-12 pd-20">
                            <div class="ui-g-6 text-grey text-left">* {{'Title'|translate}}</div>
                            <div class="ui-g-6">
                                <p-dropdown [options]="genders" formControlName="gender" [autoWidth]="false"></p-dropdown>
                            </div>
                        </div>

                        <div class="ui-g-12">
                            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['gender'].valid&&userform.controls['gender'].dirty">
                                {{'Title Required'|translate}}
                            </div>
                        </div>

                        <div class="ui-g-12 center">
                            <p-button label="{{'Next'|translate}}" type="submit" [disabled]="!userform.valid&&!isCorporate"></p-button>
                        </div>



                    </div>

                </form>


                <div class="ui-g pd-20" *ngIf="checked">
                    <div class="ui-g-2">
                        <button pButton type="button" icon="fa fa-search" (click)="onSearch()"></button>
                    </div>
                    <div class="ui-g-10">
                        <span class="md-inputfield ui-float-label pd-40">
                            <input type="text" pInputText [(ngModel)]="query">
                            <label> {{'Already get iPan ID?'|translate}}</label>
                        </span>
                    </div>
                </div>
            </div>


            <div *ngIf="this.step === '2'">

                <h3 class="header-center text-grey">
                    <a class="btn btn-light" [routerLink]="['/']" role="button">
                        <i class="fa fa-home" aria-hidden="true"></i>
                    </a>
                    {{'iPAN Member Registeration'|translate}}
                    <span class="badge badge-secondary">{{'Step 2'|translate}}</span>
                </h3>
                <!-- <div class="alert alert-secondary" role="alert">
                status:{{currentProfile.status}}
        </div> -->
                <hr>
                <div class="ui-g-12 text-left">
                    {{'Please upload your photo'|translate}}
                </div>
                <div class="ui-g-12  text-left">
                    <!-- Right Side -->

                    <h4>{{'Sample Photo'|translate}}</h4>
                    <p-lightbox [images]="sampleImages"></p-lightbox>

                </div>
                <div class="ui-g-12">
                    <table>
                        <tbody>
                            <div *ngFor="let attachment of currentProfile['user_portrait']">
                                <tr>
                                    <td>
                                        <img [src]="attachment.filePath" height="50" width="50" />
                                    </td>
                                    <td>
                                        <p-button (onClick)="onDeleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
                                        <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
                                    </td>
                                </tr>
                            </div>

                        </tbody>
                    </table>
                </div>

                <div *ngIf="!isAlreadyUplaodedPhoto()" (click)="onEditPhoto($event, fileUploaderPictures)" class="ui-g-12">
                    <p-fileUpload #fileUploaderPictures (uploadHandler)="onFileUpload('user_portrait',fileUploaderPictures)" customUpload="true"
                        [withCredentials]="true"></p-fileUpload>
                </div>
                <div class="ui-g-12  text-left">
                    {{'Please upload your valid Passport, Driver’s license or Government Issued ID Card'|translate}}
                </div>
                <div class="ui-g-12">
                    <table>
                        <tbody>
                            <div *ngFor="let attachment of currentProfile['user_attachments']">
                                <tr>
                                    <td>
                                        <img [src]="attachment.filePath" height="50" width="50" />
                                    </td>
                                    <td>
                                        <p-button (onClick)="onDeleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
                                        <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
                                    </td>
                                </tr>
                            </div>

                        </tbody>
                    </table>

                </div>

                <div class="ui-g-12" #attachContainer (click)="onEditPhoto($event, fileUploaderAttachments, attachContainer)">
                    <p-fileUpload #fileUploaderAttachments (uploadHandler)="onFileUpload('user_attachments',fileUploaderAttachments)" customUpload="true"
                        [withCredentials]="true" multiple="multiple"></p-fileUpload>
                </div>
                <div class="ui-g-12  text-left">
                    {{'Note: If you need iPAN business card and ipanproperty.com email box, please send your request to info@ipanproperty.com along with your iPAN ID.'|translate}}
                </div>
                <div class="ui-grid-row align-center">
                    <div class="ui-g-12">
                        <p-button label="{{'Submit Application'|translate}}" *ngIf="validateUpload()" type="submit" (click)="tcShow()" styleClass="ui-button-primary"></p-button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<p-inputSwitch [(ngModel)]="checked"></p-inputSwitch>

<div *ngIf="editImage" (click)="clearEditImage()" class="cover-back">
</div>
<angular-cropper #angularCropper
    [ngStyle]="editImageStyle"
    *ngIf="editImage"
    [cropperOptions]="editImageConfig"
    [imageUrl]="editImage"
    (ready)="onEditImageReady()"
></angular-cropper>

<p-dialog [(visible)]="display" width="625" height="450">
    <p-header>
        <span class="text-center">{{'Terms of Agreement'|translate}}</span>

    </p-header>
    <p-scrollPanel [style]="{width: '100%', height: '380px'}">
        <span [innerHTML]="tcText"></span>
    </p-scrollPanel>
    <p-footer>
        <div class="ui-g">
            <div class="ui-g-6"> <button pButton type="button" icon="fa fa-check" (click)="complete()" label="{{'I Agree'|translate}}" ></button></div>
        </div>

    </p-footer>
</p-dialog>

<p-dialog header="Uploading" [(visible)]="bUploading" [width]="80" modal="true">
        <p-progressSpinner  [style]="{width: '50px', height: '50px'}" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"></p-progressSpinner>
</p-dialog>
